<template>
  <div class="home">
    <el-menu class="el-menu-vertical-demo" default-active="1" :router="true" :collapse="isCollapse">
      <el-menu-item index="1" route="/order">
        <el-icon><Tools /></el-icon>
        <span>游戏设置</span>
        <!-- <el-menu-item index="/order">关卡排序</el-menu-item>
        <el-menu-item v-for="item,i in list" :key="i" :index="'/game/'+item.id">{{ item.name }}</el-menu-item> -->
      </el-menu-item>
      
      <!-- <el-sub-menu index="2">
        <el-icon><Menu /></el-icon>
        <template #title><span>序列图动画</span></template>
      </el-sub-menu> -->
      <el-sub-menu index="2">
        <template #title>
          <el-icon><document /></el-icon>
          <span>资源库</span>
        </template>
        <el-menu-item index="/image">图片</el-menu-item>
        <el-menu-item index="/animation">动画</el-menu-item>
      </el-sub-menu>
      <!-- <el-menu-item index="3">
        <el-icon><setting /></el-icon>
        <template #title>Navigator Four</template>
      </el-menu-item> -->
    </el-menu>
    <div class="main-container hasTagsView" :style="'margin-left: '+(isCollapse?64:200)+'px;'">
      <div class="navbar">
        <div class="hamburger-container" v-on:click="onExpand"><el-icon><Expand /></el-icon></div>
        <div class="flex-full"></div>
        <div class="flex-row-center"><div class="user-name">admin</div></div>
      </div>
      <div>
        <RouterView></RouterView>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogVisible">
    <span>用户信息失效，需要重新登录！</span>
    <template #footer>
      <span class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">Cancel</el-button> -->
        <el-button type="primary" @click="relogin">
          登录
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue';
import { ElMenu,ElSubMenu,ElMenuItem,ElIcon,ElButton,ElMenuItemGroup } from 'element-plus';
import { Location,Expand,Document,Setting,Menu,Tools, List } from '@element-plus/icons-vue'
import ApiHelper from '@/api/ApiHelper';
import router from '@/router';
import Global from '@/Global';
import { removeToken } from '@/utils/request';

export default defineComponent({
  name: 'HomeView',
  components: {
    ElMenu,
    ElSubMenu,
    ElMenuItem,
    ElIcon,
    Expand,
    Document,
    Tools
  },
  setup() {
    const dialogVisible = ref(false)
    const list=ref<any[]>([])
    const isCollapse = ref(false)
    const onExpand=()=>{isCollapse.value=!isCollapse.value}
    const getGameInfo=()=>{
      ApiHelper.getInstance().getGameInfo().then((res:any[])=>{
          //console.log(res)
          /*list.length=0
          for(let i=0;i<res.length;i++){
              list.push(res[i])
          }*/
          list.value=res
          Global.getInstance().game_list=res
      })
    }
    const relogin=()=>{
      dialogVisible.value=false
      removeToken()
      router.push('/login')
    }
    onMounted(()=>{
      ApiHelper.getInstance().getUserInfo().then(res=>{
        console.log('getUserInfo',res)
        if(res.account){
          getGameInfo()
        }else{
          dialogVisible.value=true
        }
        
      }).catch(err=>{
        console.log(err)
        //router.push('/login');
        dialogVisible.value=true
      })
      //
      //
    })
    return {isCollapse,onExpand,list,dialogVisible,relogin}
  },
});
</script>
<style scoped lang="less">
.el-menu-vertical-demo{
  float: left;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.main-container{
  height: 100%;
  transition: margin-left .28s;
  margin-left: 200px;
}
.navbar{
  height: 50px;
  display: flex;
  .hamburger-container{
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 15px;
  }
  .user-name{
    padding: 0 15px;
  }
}
</style>